<template>
  <Main>
    <div class="depart-tree">
      <el-tabs
        tab-position="left"
        style="height: 100%"
        :empty-text="emptyText"
        @tab-click="handleNodeClick"
      >
        <el-tab-pane
          label="用户管理"
          v-for="(item, index) in LeftTableData"
          :key="index"
          :label="item.name"
          :name="item.code"
          class="el-tabs__nav-scroll"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <!-- <div class="middle"></div> -->
    <div class="right">
      <el-button type="primary" @click="add()" size="small" icon="el-icon-plus">增加字典</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="objectId"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column fixed prop="value" label="字典值"></el-table-column>
        <el-table-column prop="note" label="字典说明"></el-table-column>
        <el-table-column fixed="right" label="操作" width="300px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="addLower(scope.row.objectId,scope.row.code)"
            >
              <i class="el-icon-plus"></i>新增下级字典
            </el-button>
            <el-button type="primary" size="small" @click="edit(scope.row.objectId)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button size="small" @click="del(scope.row.objectId)">
              <i class="el-icon-delete"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Add ref="Add" @refresh="RightFetch"></Add>
      <Edit ref="Edit" @refresh="RightFetch"></Edit>
      <AddLower ref="AddLower" @refresh="RightFetch"></AddLower>
    </div>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import DepartTree from "@/components/auth/departTree";
import { baseUrl } from "@/config/env";
import Add from "./add";
import Edit from "./edit";
import AddLower from "./addLower";
const urls = {
  delete: baseUrl + "/dict/sys-dict/delete",
  Rightlist: baseUrl + "/dict/sys-dict/list",
  leftList: baseUrl + "/dict/sys-dict-type/list"
};
export default {
  methods: {
    sortChange(column, prop, order) {
      this.formInline.sorter = {
        field: column.prop,
        order: column.order
      };
      this.fetch();
    },
    addLower: function(objectId, code) {
      this.$refs.AddLower.show(this.typeCode, objectId, code);
    },
    changePage(val) {
      this.formInline.page = val;
      this.fetch();
    },
    add: function() {
      this.$refs.Add.show(this.typeCode);
    },
    edit: function(objectId) {
      this.$refs.Edit.show(objectId, this.formInline.deptId);
    },
    del: function(objectId) {
      this.$confirm("确认要删除该字典吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.delete, { params: { objectId: objectId } }).then(res => {
          this.$message(res.data.result);
          this.fetch();
        });
      });
    },
    fetch(code) {
      axios.get(urls.leftList).then(res => {
        const data = res.data.result;
        this.emptyText = "暂无数据";
        this.LeftTableData = data;
        this.RightFetch();
      });
    },
    RightFetch() {
      var params = {};
      params.typeCode = this.typeCode;
      params.status = 0;
      axios.post(urls.Rightlist, params).then(res => {
        const data = res.data.result;
        this.tableData = data;
      });
    },
    handleNodeClick(e) {
      this.typeCode = e.name;
      this.fetch(e.name);
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        realName: null,
        usrName: null,
        deptId: null,
        limit: 10,
        page: 1,
        total: 0,
        sorter: {}
      },
      tableData: [],
      LeftTableData: [],
      props: {
        label: "name"
      },
      typeCode: null,
      emptyText: "加载中..."
    };
  },
  components: {
    Add,
    Edit,
    Main,
    page,
    DepartTree,
    AddLower
  }
};
</script>
<style scoped>
.depart-tree {
  position: absolute;
  background: #fff;
  width: 10%;
  top: 50px;
  left: 6px;
  bottom: 0px;
  overflow-y: scroll;
}
.right {
  background: #fff;
  width: 90%;
  position: absolute;
  right: 6px;
  height: 92%;
  overflow-y: auto;
}
.user-list {
  position: absolute;
  background: #fff;
  padding: 20px;
  top: 50px;
  left: 270px;
  right: 0;
  bottom: 0px;
}
.middle {
  position: absolute;
  z-index: 88;
  top: 40px;
  left: 250px;
  width: 30px;
  height: 100%;
  background: #f0f2f5;
}
/deep/ .el-tabs__nav-scroll {
  width: 115px !important;
  padding-top: 20px;
}
/deep/ .itema {
  margin-left: 10px;
}
/deep/ .el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after,
.el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
  top: 20px;
}
</style>